import './index.less';
import { Component } from 'react';
import {
  Carousel,
  Grid,
  Toast,
  WhiteSpace,
  WingBlank,
  NoticeBar,
} from 'antd-mobile';

const gridNames = [
  '热点',
  '党史',
  '铁路',
  '安全',
  '疫情',
  '课程',
  '资源',
  '我的',
];

const gridData = Array.from(new Array(8)).map((item, index) => ({
  icon: require(`@/assets/images/c-${index + 1}.png`),
  text: gridNames[index],
}));

const newsData = Array.from(new Array(4)).map((item, index) => ({
  icon: require(`@/assets/images/c-${index + 1}.png`),
  text: gridNames[index],
}));

export default class IndexPage extends Component {
  gridClick = (el) => {
    Toast.info(el.text, 1);
  };

  renderNews = () => {
    return <div>测试</div>;
  };

  render() {
    return (
      <div className="index_wrapper">
        <Carousel
          infinite
          autoplay
          cellSpacing={10}
          slideWidth={0.8}
          className="index_lb"
        >
          <img src={require('@/assets/images/lb-dang.jpg')} />
          <img src={require('@/assets/images/lb-xds.jpg')} />
          <img src={require('@/assets/images/lb-tlaq.jpg')} />
        </Carousel>
        <WhiteSpace />
        <NoticeBar
          marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}
          mode="closable"
        >
          请使用浏览器手机模式观看
        </NoticeBar>
        <WhiteSpace />
        <div className="index_quick">
          <Grid data={gridData} onClick={this.gridClick} />
        </div>
        <WhiteSpace size="lg" />
        <WingBlank>最新资讯</WingBlank>
        <div className="index_nominate"></div>
        <Grid renderItem={this.renderNews} data={newsData} columnNum={2} />
      </div>
    );
  }
}
